<template>
  <!---------- 查询表单form begin ----------->
  <a-form class="smart-query-form">
    <a-row class="smart-query-form-row">
      <a-form-item label="项目名称" class="smart-query-form-item">
        <a-input style="width: 150px" v-model:value="queryForm.projectName" placeholder="项目名称" />
      </a-form-item>
      <a-form-item label="客户名称" class="smart-query-form-item">
        <a-input style="width: 150px" v-model:value="queryForm.customerName" placeholder="客户名称" />
      </a-form-item>
      <!-- <a-form-item label="项目负责人id" class="smart-query-form-item">
                <a-input style="width: 150px" v-model:value="queryForm.projectLeaderId" placeholder="项目负责人id" />
            </a-form-item> -->
      <a-form-item label="立项日期" class="smart-query-form-item">
        <a-range-picker v-model:value="queryForm.approveDate" :presets="defaultTimeRanges" style="width: 250px"
          @change="onChangeApproveDate" />
      </a-form-item>
      <a-form-item class="smart-query-form-item">
        <a-button type="primary" @click="queryData">
          <template #icon>
            <SearchOutlined />
          </template>
          查1询
        </a-button>
        <a-button @click="resetQuery" class="smart-margin-left10">
          <template #icon>
            <ReloadOutlined />
          </template>
          重置
        </a-button>
      </a-form-item>
    </a-row>
  </a-form>

  <!---------- 查询表单form end ----------->

  <a-card size="small" :bordered="false" :hoverable="true">
    <!---------- 表格操作行 begin ----------->
    <a-row class="smart-table-btn-block">
      <div class="smart-table-operate-block">
        <a-button @click="showForm" type="primary" size="small">
          <template #icon>
            <PlusOutlined />
          </template>
          新建
        </a-button>
        <a-button @click="confirmBatchDelete" type="danger" size="small" :disabled="selectedRowKeyList.length == 0">
          <template #icon>
            <DeleteOutlined />
          </template>
          批量删除
        </a-button>
      </div>
      <div class="smart-table-setting-block">
        <TableOperator v-model="columns" :tableId="TABLE_ID_CONST.BUSINESS.OA.ENTERPRISE" :refresh="ajaxQuery" />
      </div>
    </a-row>
    <!---------- 表格 begin ----------->
    <a-table size="small" :dataSource="tableData" :columns="columns" rowKey="id" bordered :loading="tableLoading"
      :pagination="false" :row-selection="{ selectedRowKeys: selectedRowKeyList, onChange: onSelectChange }">
      <template #bodyCell="{ record, column }">
        <template v-if="column.dataIndex === 'action'">
          <div class="smart-table-operate">
            <a-button type="link" @click="Overview(record)">项目概况</a-button>

            <a-button type="link" @click="Projection(record)">项目报价</a-button>
            <a-button type="link" @click="projectCost(record)">项目成本</a-button>
            <a-button type="link" @click="openPepole(record)">人工成本</a-button>
            <a-button type="link" @click="summarize">项目计划</a-button>
            <a-button type="link" @click="showForm(record)">编辑</a-button>
            <a-button type="link" style="color: red" @click="onDelete(record)">删除</a-button>
          </div>
        </template>
      </template>
    </a-table>
    <!-- 项目弹框内容（注意不能放在table表格里面） -->
    <a-modal v-model:open="open" :footer="null" width="80%">
      <div style="height: 600px;">
        <a-tabs v-model:activeKey="activeKey" tab-position="left">
          <a-tab-pane key="1" tab="项目概况">
            <a-descriptions title="项目概况" column="3" size="middle">
              <a-descriptions-item label="项目名称">{{ Ovariables.customerName }}</a-descriptions-item>
              <a-descriptions-item label="立项日期">{{ Ovariables.approveDate }}</a-descriptions-item>
              <a-descriptions-item label="竣工日期">{{ Ovariables.createTime }}</a-descriptions-item>
              <a-descriptions-item label="项目负责人">{{ Ovariables.actualName }}</a-descriptions-item>
              <a-descriptions-item label="客户名称">{{ Ovariables.createUserName }}</a-descriptions-item>
              <a-descriptions-item label="施工地址">{{ Ovariables.address }}</a-descriptions-item>
              <a-descriptions-item label="项目概述">{{ Ovariables.projectName }}</a-descriptions-item>
              <a-descriptions-item label="合同金额">{{ Ovariables.contractAmount }}</a-descriptions-item>
              <a-descriptions-item label="合同文件">
                <a-button style="margin-left: 10px" type="primary" size="small" @click="viewFile">查看文件</a-button>
              </a-descriptions-item>
            </a-descriptions>
            <!-- chart 图标 -->
            <default-home-card icon="Profile" title="销量统计">
              <div>物料总成本:{{ wuliaoCountPrice }}</div>
              <div class="echarts-box">
                <div class="category-main" id="category-main"></div>
              </div>
            </default-home-card>
          </a-tab-pane>

          <a-tab-pane key="2" tab="报价合同">
            <a-button @click="addshowForm" type="primary" style="margin: 10px;">
              <template #icon>
                <PlusOutlined />
              </template>
              新建
            </a-button>

            <a-table rowKey="id" :columns="tableColumns2" :dataSource="tableData2" :pagination="false"
              :loading="tableLoading" bordered>
              <template #bodyCell="{ column, record, text }">

                <template v-if="column.dataIndex === 'contractUrl'">


                  <a-button @click="handerview(record)">查看文件</a-button>
                </template>
                <template v-if="column.dataIndex === 'invoiceUrl'">
                  <!-- <a>{{ record.invoiceUrl }}</a> -->
                  <a-button @click="handerview2(record)">查看文件</a-button>
                </template>
                <template v-if="column.dataIndex === 'action'">
                  <a-button @click="handerEdit(record)">编辑</a-button>
                  <a-button type="primary" style="margin-left:6px ;" danger @click="handerDelete(record)">删除</a-button>
                </template>

              </template>
            </a-table>

            <div class="smart-query-table-page">
              <a-pagination showSizeChanger showQuickJumper show-less-items :pageSizeOptions="PAGE_SIZE_OPTIONS"
                :defaultPageSize="queryForm2.pageSize" v-model:current="queryForm2.pageNum"
                v-model:pageSize="queryForm2.pageSize" :total="total2" @change="queryNoticeList2"
                @showSizeChange="queryNoticeList2" :show-total="(total2) => `共${total2}条`" />
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>

    </a-modal>

    <!-- 添加合同报价 -->
    <a-modal v-model:open="hetongopen" title="添加/编辑" @ok="handleOkhetong" width="50%">
      <a-form ref="formRef22" :model="formState" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-row>
          <a-col :span="12">
            <a-form-item label="合同名称" name="contractName">
              <a-input v-model:value="formState.contractName" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="上传合同" name="contractUrl">
              <a-input v-model:value="formState.contractUrl" disabled>
                <template #addonAfter>
                  <a-button type="primary" @click="showUploadModal" size="small">
                    <template #icon><cloud-upload-outlined /></template>上传合同
                  </a-button>
                </template>
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="合同报价" name="contractPrice">
              <a-input-number v-model:value="formState.contractPrice" :step="0.001" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="供应商" name="supplierName">
              <a-select v-model:value="formState.supplierName" placeholder="供应商">
                <a-select-option v-for="item in registrantList" :key="item" :value="item.companyName">{{
                  item.companyName
                }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="发票名称">
              <a-input v-model:value="formState.invoiceName" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="上传发票">
              <a-input v-model:value="formState.invoiceUrl" disabled>
                <template #addonAfter>
                  <a-button type="primary" @click="showUploadModal2" size="small">
                    <template #icon><cloud-upload-outlined /></template>上传发票
                  </a-button>
                </template>
              </a-input>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>

    <a-modal v-model:open="uploadModalFlag" title="上传文件" @onCancel="hideUploadModal" @ok="hideUploadModal">
      <FileUpload list-type="text" :maxUploadSize="5" buttonText="点击上传文件" :defaultFileList="[]" :multiple="true"
        :folder="FILE_FOLDER_TYPE_ENUM.COMMON.value" @change="fileChange" />
    </a-modal>

    <a-modal v-model:open="uploadModalFlag2" title="上传文件" @onCancel="hideUploadModal2" @ok="hideUploadModal2">
      <FileUpload list-type="text" :maxUploadSize="5" buttonText="点击上传文件" :defaultFileList="[]" :multiple="true"
        :folder="FILE_FOLDER_TYPE_ENUM.COMMON.value" @change="fileChange2" />
    </a-modal>
    <!-- 人工成本 -->
    <a-modal style="width: 1300px" v-model:open="open8" @ok="handleOk8">
      <a-descriptions title="项目概况" column="3" size="middle">
        <a-descriptions-item label="项目名称">{{ projectEntity.projectName }}</a-descriptions-item>
        <a-descriptions-item label="立项日期">{{ projectEntity.approveDate }}</a-descriptions-item>
        <a-descriptions-item label="竣工日期">{{ projectEntity.createTime }}</a-descriptions-item>
        <a-descriptions-item label="项目负责人">{{ employee.actualName }}</a-descriptions-item>
        <a-descriptions-item label="客户名称">{{ projectEntity.customerName }}</a-descriptions-item>
        <a-descriptions-item label="施工地址">{{ projectEntity.address }}</a-descriptions-item>
        <a-descriptions-item label="项目概述">{{ projectEntity.projectName }}</a-descriptions-item>
        <a-descriptions-item label="合同金额">{{ projectEntity.contractAmount }}</a-descriptions-item>
      </a-descriptions>
      <a-descriptions title="人工概况" column="3" size="middle">
        <template v-for="(i, k) in projectTimesheetVOList">
          <a-descriptions-item label="包工头">{{ i.employeeVO.actualName }}</a-descriptions-item>
        </template>
      </a-descriptions>
      <!-- chart 图标 -->
      <default-home-card icon="Profile" title="销量统计">
        <div>物料总成本:{{ wuliaoCountPrice2 }}</div>
        <div class="echarts-box">
          <div class="category-main" id="category-main"></div>
        </div>
      </default-home-card>
    </a-modal>

    <!-- 項目概括彈框 -->
    <a-modal v-model:open="open1" title="项目概括" @ok="handleOk1" style="width: 1100px">
      <div class="card">
        <el-card>
          <div class="ard">
            <el-radio-group v-model="radio2">
              <el-radio-button label="全部" />
              <el-radio-button label="进行中" />
              <el-radio-button label="已超时" />
              <el-radio-button label="已完成" />
            </el-radio-group>
            <div class="asd">
              <p>开始时间：</p>
              <el-date-picker v-model="value1" type="date" placeholder="点击选择时间" :size="size" />
            </div>
            <div class="asd">
              <p>结束时间：</p>
              <el-date-picker v-model="value1" type="date" placeholder="点击选择时间" :size="size" />
            </div>
            <div class="asd">
              <p>选择任务类型：</p>
              <el-select v-model="value" class="m-2" placeholder="下拉选择" style="width: 170px">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </div>
            <el-button style="margin-left: 10px" type="primary" :icon="Filter">筛选</el-button>
            <el-button type="primary" :icon="Plus">新增</el-button>
          </div>
        </el-card>
        <el-card class="box-card">
          <div class="cardtop">
            <div class="margins">
              <p><el-color-picker v-model="objs.asd1" show-alpha />攻击组</p>
              <p><el-color-picker v-model="objs.asd2" show-alpha />防御组</p>
              <p><el-color-picker v-model="objs.asd3" show-alpha />目标组</p>
            </div>
            <el-radio-group v-model="radio1" size="small">
              <el-radio-button label="年" />
              <el-radio-button label="月" />
              <el-radio-button label="日" />
            </el-radio-group>
          </div>
          <div id="gantt_here" style="margin-top: 10px" class="gantt-container"></div>
        </el-card>
      </div>
      <template #footer>
        <a-button key="back" @click="handleCancel">取消</a-button>
        <a-button key="submit" type="primary" :loading="loading" @click="handleOk">确定</a-button>
      </template>
    </a-modal>
    <a-modal v-model:open="fileopen" title="文件查看" @ok="handleOk" style="width: 1000px; height: 600px">
      <div>
        <iframe :src="fileUrl" style="width: 900px; height: 600px"></iframe>
      </div>
    </a-modal>
    <!---------- 表格 end ----------->
    <div class="smart-query-table-page">
      <a-pagination showSizeChanger showQuickJumper show-less-items :pageSizeOptions="PAGE_SIZE_OPTIONS"
        :defaultPageSize="queryForm.pageSize" v-model:current="queryForm.pageNum" v-model:pageSize="queryForm.pageSize"
        :total="total" @change="queryData" @showSizeChange="queryData" :show-total="(total) => `共${total}条`" />
    </div>

    <ProjectForm ref="formRef" @reloadList="queryData" />
  </a-card>
</template>
<script setup>
import { reactive, toRefs, ref, onBeforeMount, onMounted, watchEffect, defineExpose, nextTick, createVNode } from 'vue';
import { message, Modal } from 'ant-design-vue';
import { SmartLoading } from '/@/components/framework/smart-loading';
import { projectApi } from '/@/api/business/project/project-api';
import { PAGE_SIZE_OPTIONS } from '/@/constants/common-const';
import { smartSentry } from '/@/lib/smart-sentry';
import TableOperator from '/@/components/support/table-operator/index.vue';
import { defaultTimeRanges } from '/@/lib/default-time-ranges';
import ProjectForm from './components/project-form.vue';
import { gantt } from 'dhtmlx-gantt';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';
import { Plus, Filter } from '@element-plus/icons-vue';
import { router } from '/@/router';
import { TABLE_ID_CONST } from '/@/constants/support/table-id-const';
import DefaultHomeCard from '/@/views/system/home/components/default-home-card.vue';
import FileUpload from '/@/components/support/file-upload/index.vue';
import { FILE_FOLDER_TYPE_ENUM } from '/@/constants/support/file-const';
import { concludeSignApi } from '/@/api/business/conclude_sign/conclude_sign-api';
import * as echarts from 'echarts';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';

const data = reactive({});
const radio1 = ref('年');
const radio2 = ref('全部');
const value1 = ref('');
const value = ref('');
// 项目概述
const Ovariables = ref({});
const fileUrl = ref('');
const fileopen = ref(false);

const wuliaoCountPrice = ref(0);

const hetongopen = ref(false)

const activeKey = ref("1")

function addshowForm() {
  formState.projectId = projectId.value
  hetongopen.value = true
  gengys();
}

function handerview(row) {
  window.open(row.contractUrl)
}

function handerview2(row) {
  window.open(row.invoiceUrl)
}

function handerEdit(row) {
  gengys();
  formState.id = row.id
  formState.projectId = row.projectId
  formState.contractName = row.contractName
  formState.contractPrice = row.contractPrice
  formState.invoiceName = row.invoiceName
  formState.invoiceUrl = row.invoiceUrl
  formState.supplierName = row.supplierName
  formState.contractUrl = row.contractUrl
  hetongopen.value = true


}

function handerDelete(row) {
  Modal.confirm({
    title: '删除',
    icon: createVNode(ExclamationCircleOutlined),
    content: '确认是否要删除？',
    async onOk() {
      let res = await projectApi.batchdelhet(row.id)
      if (res.code == 0) {
        message.success('操作成功');
        gethetongData()
      }


    },
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    onCancel() { },
  });
}
const tableColumns2 = reactive([
  {
    title: `合同名称`,
    dataIndex: 'contractName',
    width: 100
  },

  {
    title: `合同报价`,
    dataIndex: 'contractPrice',
    width: 100
  },

  {
    title: `合同文件`,
    dataIndex: 'contractUrl',
    width: 100
  },
  {
    title: `供应商`,
    dataIndex: 'supplierName',
    width: 100
  },
  {
    title: '发票名称',
    width: 100,
    dataIndex: 'invoiceName',
  },
  {
    title: '发票链接',
    dataIndex: 'invoiceUrl',
    width: 100
  },
  {
    title: '操作',
    dataIndex: 'action',
    fixed: 'right',
    width: 200,
  },
]);
const total2 = ref(0)
const queryForm2 = ref(
  {
    pageNum: 1,
    pageSize: 10,
    projectId: null

  }
)

// 供应商
const registrantList = ref([]);
async function gengys() {
  let res = await concludeSignApi.SupplierList();
  registrantList.value = res.data;
}

const formRef22 = ref();
const labelCol = { span: 5 };
const wrapperCol = { span: 13 };
const formState = reactive({
  projectId: undefined,
  contractName: '',
  contractUrl: "",
  contractPrice: "",
  supplierName: "",
  invoiceName: "",
  invoiceUrl: '',
});

const rules = {
  contractName: [
    { required: true, message: '请填写合同名称', trigger: 'blur' },
  ],
  contractUrl: [{ required: true, message: '请上传合同', trigger: 'change' }],
  contractPrice: [{ required: true, message: '请填写合同报价', trigger: 'blur' }],
  supplierName: [{ required: true, message: '请选择供应商', trigger: 'change' }],
};


function handleOkhetong() {
  formRef22.value
    .validate()
    .then(async () => {
      if (formState.id) {
        let res = await projectApi.batchupdatehet(formState);
        if (res.code == 0) {
          gethetongData()
          hetongopen.value = false
        }

      } else {
        let res = await projectApi.batchAddhet(formState);
        if (res.code == 0) {
          gethetongData()
          hetongopen.value = false
        }
      }


      // hetongopen.value = false
    })
    .catch(error => {
      console.log('error', error);
    });
}
// ------------- 上传文件 --------------------
const uploadModalFlag = ref(false);

function showUploadModal() {
  uploadModalFlag.value = true;
}

function hideUploadModal() {
  uploadModalFlag.value = false;

}

const uploadModalFlag2 = ref(false);

function showUploadModal2() {
  uploadModalFlag2.value = true;
}

function hideUploadModal2() {
  uploadModalFlag2.value = false;

}

const fileChange = async (file) => {
  console.log(file);
  formState.contractUrl = file[0].url
};
const tableData2 = ref([])

const fileChange2 = async (file) => {
  formState.invoiceUrl = file[0].url
};
async function gethetongData() {
  queryForm2.value.projectId = projectId.value
  let res = await projectApi.batchqueryPagehet(queryForm2.value);
  if (res.code == 0) {
    tableData2.value = res.data.list
    total2.value = res.data.total
  }

}

// 概括弹框
const Overview = (record) => {
  projectId.value = record.id;
  fetchData();
  gethetongData()
  open.value = true; //弹框
  fileUrl.value = 'http://10.10.1.27:1024/upload/' + record.fileKey;
  // nextTick而是会等待同一事件循环中的所有数据变化完成后，再统一进行 DOM 的更新。
  // nextTick(() => {
  //   initcans();
  // });
  setTimeout(() => {
    initcans();
  }, 500);

  Ovariables.value = record;
};
const open = ref(false);
const handleOk = (e) => {
  console.log(e);
  open.value = true;
};
// 概括点击查看文件
const viewFile = (e) => {
  fileopen.value = true;
};
// -------------------------------------
let objs = reactive({
  asd1: '#f2e6c2',
  asd2: '#b5e09b',
  asd3: '#baefe2',
});
let dialogVisible = ref(false);
// 柱状图方法
const projectId = ref('');
const histogramList = ref({}); //用来存放柱状图数据
const fetchData = async () => {
  let chartData = await projectApi.histogram(projectId.value);
  for (let i = 0; i < chartData.data.length; i++) {
    wuliaoCountPrice.value += Number(chartData.data[i].price) * Number(chartData.data[i].usageQuantity);
  }
  histogramList.value = chartData.data;
};

// 人工成本弹框
const open8 = ref(false);
const wuliaoCountPrice2 = ref(0);
const histogramList2 = ref({}); //用来存放柱状图数据

const handleOk8 = (e) => {
  open8.value = true;
};
const openPepole = (e) => {
  projectId.value = e.id;
  fetchData2();

  open8.value = true;

};

const getEchartsData = () => {
  var titleArr = []
  var valueArr = []

  for (let i = 0; i < projectTimesheetVOList.value.length; i++) {
    titleArr.push(projectTimesheetVOList.value[i].employeeVO.actualName)
    valueArr.push(projectTimesheetVOList.value[i].hourage)
  }
  var chartDom = document.getElementById('category-main');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    xAxis: {
      type: 'category',
      data: titleArr
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: valueArr,
        type: 'bar'
      }
    ]
  };

  option && myChart.setOption(option);

}

const projectEntity = ref({});
const employee = ref({});
const projectTimesheetVOList = ref([]);
const fetchData2 = async () => {
  let resPeople = await projectApi.laborCost(projectId.value);
  console.log(resPeople.data);
  projectEntity.value = resPeople.data.projectEntity;
  projectTimesheetVOList.value = resPeople.data.projectTimesheetVOList;
  employee.value = resPeople.data.employee;
  getEchartsData()
};

// 概况里面的柱状图
function initcans() {
  let arr1 = [];
  let arr2 = [];
  for (let i = 0; i < histogramList.value.length; i++) {
    arr1.push(histogramList.value[i].goodsName);
    arr2.push(histogramList.value[i].usageQuantity);
  }

  let option = {
    xAxis: {
      type: 'category',
      data: arr1,
    },
    yAxis: {
      type: 'value',
    },
    legend: {},
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    series: [
      {
        // name: '物料成本',
        data: arr2,
        type: 'bar',
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)',
        },
      },
    ],
  };
  let chartDom = document.getElementById('category-main');
  if (chartDom) {
    let myChart = echarts.init(chartDom);
    option && myChart.setOption(option);
  }
}
//初始化甘特图
const initGantt = () => {
  var tasks = {
    data: [
      {
        id: 1,
        taskname: '明天吃烩菜',
        parent: 0,
        start_date: '01-04-2018',
        progress: 0.3,
        duration: 1,
        types: 1,
        text: '李大厨',
        color: objs.asd1,
        tsakrank: 0,
      },
      {
        id: 2,
        taskname: '明天吃鱼肉',
        parent: 0,
        start_date: '01-04-2018',
        progress: 0.42,
        duration: 5,
        types: 2,
        color: objs.asd2,
        text: '王大厨',
        tsakrank: 1,
      },
      {
        id: 3,
        taskname: '明天吃西餐',
        parent: 0,
        start_date: '01-04-2018',
        progress: 0.65,
        duration: 5,
        types: 3,
        text: '赵大厨',
        color: objs.asd3,
        tsakrank: 2,
      },
      {
        id: 4,
        taskname: '购买水军发动舆论偏差',
        parent: 1,
        start_date: '01-04-2018',
        progress: 0.1,
        duration: 1,
        types: 1,
        text: '李大厨',
        color: objs.asd1,
      },
      {
        id: 5,
        taskname: '编辑一边有效证据的文章',
        parent: 2,
        start_date: '01-04-2018',
        progress: 0.1,
        duration: 3,
        types: 2,
        text: '王大厨',
        color: objs.asd2,
      },
      {
        id: 6,
        taskname: '寻找目标人物关键证据',
        parent: 3,

        start_date: '01-04-2018',
        progress: 0.1,
        duration: 3,
        types: 3,
        text: '赵大厨',
        color: objs.asd3,
      },
      {
        id: 7,
        taskname: '发布目标任务黑料',
        parent: 1,

        start_date: '03-04-2018',
        progress: 0.2,
        duration: 2,
        types: 1,
        text: '李大厨',
        color: objs.asd1,
      },
      {
        id: 8,
        taskname: '打造慈善公益效果',
        parent: 2,

        start_date: '04-04-2018',
        progress: 0.1,
        duration: 3,
        types: 2,
        text: '王大厨',
        color: objs.asd2,
      },
      {
        id: 9,
        taskname: '查看目标亲朋好友博客',
        parent: 3,
        start_date: '02-04-2018',
        progress: 0.1,
        duration: 6,
        types: 3,
        text: '赵大厨',
        color: objs.asd3,
      },
    ],
  };
  gantt.config.grid_width = 350;
  gantt.config.add_column = false; //添加符号
  gantt.config.autosize = true; //自适应尺寸
  gantt.config.autofit = true; // 表格列宽自适应
  gantt.config.autoscroll = true; // 把任务或者连线拖拽到浏览器屏幕外时，自动触发滚动效果
  gantt.config.drag_progress = false; //取消任务进度条进度拖动
  gantt.config.scale_height = 60;
  gantt.config.row_height = 60;
  gantt.config.bar_height = 34;
  gantt.config.fit_tasks = true; //自动延长时间刻度，以适应所有显示的任务
  gantt.config.auto_types = true; //将包含子任务的任务转换为项目，将没有子任务的项目转换回任务
  gantt.i18n.setLocale('cn'); //设置语言
  //时间栏配置
  gantt.config.scales = [
    { unit: 'month', step: 1, format: '%Y年%m月' },
    { unit: 'day', step: 1, format: '%m/%d' },
  ];
  //左侧列表配置
  gantt.config.columns = [
    { name: 'taskname', label: '任务名称', align: 'left', tree: true, width: 140 },
    {
      name: 'progress',
      label: '任务优先',
      align: 'center',
      width: 80,
      template: function (task) {
        let obj = {
          color: task.tsakrank === 0 ? '#ff2b00' : task.tsakrank === 1 ? '#ffab00' : '#409eff',
          icon: task.tsakrank === 0 ? 'icon-youxianjiP0' : task.tsakrank === 1 ? 'icon-youxianjiP1' : 'icon-youxianjiP2',
        };
        return `<div class="jindu" style="color:${obj.color};"><i style="font-size:24px;" class="iconfont ${obj.icon}"></i></div>`;
      },
    },
    {
      name: 'type',
      label: '任务类别',
      align: 'center',
      width: 100,
      template: function (task) {
        let obj = {
          color: task.types === 1 ? '#f29d38' : task.types === 2 ? '#65c16f' : '#1890ff',
          icon: task.types === 1 ? 'icon-gongji' : task.types === 2 ? 'icon-kaiqifangyu' : 'icon-icon--mubiaoku',
          text: task.types === 1 ? '攻击' : task.types === 2 ? '防御' : '目标',
        };
        return `<div class="tasktype" style="color:${obj.color};font-size:14px;">
					<i class="iconfont ${obj.icon}"></i>
					<span style="margin-left:3px;"> ${obj.text}</span>
					</div>`;
      },
    },
    {
      name: 'progress',
      label: '任务进度',
      align: 'center',
      width: 80,
      template: function (task) {
        return `<div class="jindu" style="width:100%;height:30px;padding-left:10px;font-size:13px;color:black;"><span>${(task.progress * 100).toFixed(0) + '%'}</span></div>`;
      },
    },
  ];
  //更改父项图标
  gantt.templates.grid_folder = (item) => {
    return '';
  };
  gantt.plugins({
    marker: true,
  });
  var date_to_str = gantt.date.date_to_str(gantt.config.task_date);
  var today = new Date();
  gantt.addMarker({
    start_date: today,
    css: 'today',
    text: '今天',
    title: '今天: ' + date_to_str(today),
  });
  //更改子项图标
  gantt.templates.grid_file = (item) => {
    return '';
  };
  //任务条显示内容
  gantt.templates.task_text = function (start, end, task) {
    return `
			<div style="color:#454545;font-size:14px;font-weight:700;">执行：${task.text}</div>
		`;
  };
  //展开树图标
  gantt.templates.grid_open = function (item) {
    return `<i style="font-size:14px;background:none; color:#1890ff; padding-left:10px;" class="gantt_tree_icon gantt_${item.$open ? 'close' : 'open'}  iconfont  ${item.$open ? 'icon-zhankaishousuo' : 'icon-zhankaishousuo1'}"></i>`;
  };
  gantt.init('gantt_here'); //初始化
  gantt.parse(tasks); //填充数据
  //双击事件
  gantt.attachEvent('onTaskDblClick', function (id, e) {
    // 在这里编写处理双击事件的代码
    console.log('双击了任务：' + id);
    dialogVisible.value = true;
  });
};

onBeforeMount(() => { });

onMounted(() => {
  queryData();
});

watchEffect(() => { });

defineExpose({
  ...toRefs(data),
});

// ---------------------------- 表格列 ----------------------------
const loading = ref(false);
const open1 = ref(false);
const columns = ref([
  {
    title: '项目编号',
    dataIndex: 'projectCode',
    ellipsis: true,
  },
  {
    title: '项目名称',
    dataIndex: 'projectName',
    ellipsis: true,
  },

  {
    title: '合同金额',
    dataIndex: 'contractAmount',
    ellipsis: true,
  },
  {
    title: '客户名称',
    dataIndex: 'customerName',
    ellipsis: true,
  },
  {
    title: '立项日期',
    dataIndex: 'approveDate',
    ellipsis: true,
  },
  {
    title: '操作',
    dataIndex: 'action',
    fixed: 'right',
    width: 430,
    text: 'center',
  },
]);

// ---------------------------- 查询数据表单和方法 ----------------------------

const queryFormState = {
  projectName: undefined, //项目名称
  customerName: undefined, //客户名称
  //projectLeaderId: undefined, //项目负责人id
  approveDate: [], //立项日期
  approveDateBegin: undefined, //立项日期 开始
  approveDateEnd: undefined, //立项日期 结束
  pageNum: 1,
  pageSize: 10,
};
// 查询表单form
const queryForm = reactive({ ...queryFormState });
// 表格加载loading
const tableLoading = ref(false);
// 表格数据
const tableData = ref([]);
// 总数
const total = ref(0);
// 重置查询条件
function resetQuery() {
  let pageSize = queryForm.pageSize;
  Object.assign(queryForm, queryFormState);
  queryForm.pageSize = pageSize;
  queryData();
}
// 查询数据
async function queryData() {
  tableLoading.value = true;
  try {
    let queryResult = await projectApi.queryPage(queryForm);
    tableData.value = queryResult.data.list;
    total.value = queryResult.data.total;
  } catch (e) {
    smartSentry.captureError(e);
  } finally {
    tableLoading.value = false;
  }
}
function onChangeApproveDate(dates, dateStrings) {
  queryForm.approveDateBegin = dateStrings[0];
  queryForm.approveDateEnd = dateStrings[1];
}

// ---------------------------- 添加/修改 ----------------------------
const formRef = ref();

function showForm(record) {
  // console.log(data)
  formRef.value.show(record);
}
// show(record);调用查询显示的方法
// ---------------------------- 单个删除 ----------------------------
//确认删除
function onDelete(data) {
  Modal.confirm({
    title: '提示',
    content: '确定要删除选吗?',
    okText: '删除',
    okType: 'danger',
    onOk() {
      requestDelete(data);
    },
    cancelText: '取消',
    onCancel() { },
  });
}

//请求删除
async function requestDelete(data) {
  SmartLoading.show();
  try {
    let deleteForm = {
      goodsIdList: selectedRowKeyList.value,
    };
    await projectApi.delete(data.id);
    message.success('删除成功');
    queryData();
  } catch (e) {
    smartSentry.captureError(e);
  } finally {
    SmartLoading.hide();
  }
}
// ---------------------------- 批量删除 ----------------------------
// 选择表格行
const selectedRowKeyList = ref([]);
function onSelectChange(selectedRowKeys) {
  selectedRowKeyList.value = selectedRowKeys;
}
// 批量删除
function confirmBatchDelete() {
  Modal.confirm({
    title: '提示',
    content: '确定要批量删除这些数据吗?',
    okText: '删除',
    okType: 'danger',
    onOk() {
      requestBatchDelete();
    },
    cancelText: '取消',
    onCancel() { },
  });
}

//请求批量删除
async function requestBatchDelete() {
  try {
    SmartLoading.show();
    await projectApi.batchDelete(selectedRowKeyList.value);
    message.success('删除成功');
    queryData();
  } catch (e) {
    smartSentry.captureError(e);
  } finally {
    SmartLoading.hide();
  }
}
// 项目报价
const Projection = (record) => {
  router.push({ path: '/project_material', query: { projectId: record.id } });
};
// 项目成本
const projectCost = (record) => {
  router.push({ path: '/support/project/project_cost', query: { projectId: record.id } });
};
// 项目计划
const summarize = () => {
  open1.value = true;
  setTimeout(() => {
    initGantt();
  }, 1000);
};
const handleOk1 = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
    open.value = false;
  }, 2000);
};
const handleCancel = () => {
  open.value = false;
};
</script>

<style scoped lang="scss">
:deep(.ant-tabs-tab) {
  padding: 3px 24px !important;
}

.echarts-box {
  display: flex;
  align-items: center;
  justify-content: center;

  .category-main {
    width: 800px;
    height: 280px;
    background: #fff;
  }
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

.renwus {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  overflow: auto;
}

.renwu {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
}

:deep(.el-progress-circle) {
  width: 100px !important;
  height: 80px !important;
}

.ps {
  padding: 0;
  margin: 0;
}

.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 28px;
}

.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 12px;
}

.demo-progress .el-progress--line {
  margin-bottom: 15px;
  width: 350px;
}

.demo-progress .el-progress--circle {
  margin-right: 15px;
}

.cardtop {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .margins {
    display: flex;
    font-size: 12px;

    p {
      margin-left: 10px;

      :deep(.el-color-picker .el-color-picker__icon) {
        opacity: 0;
      }

      :deep(.el-color-picker__trigger) {
        border: none;
        width: 25px;
        height: 25px;
      }
    }
  }
}

.box-card {
  margin-top: 20px;
}

.card {
  width: 1000px;
  height: 1000px;
  margin: 0 auto;

  .ard {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
  }

  .icons {
    width: 80px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #a0cfff;
    color: #46a2ff;
    margin-right: 10px;
    border-radius: 7px;
    background-color: #ecf5ff;

    i {
      color: #1890ff;
      font-size: 14px;
      margin-right: 5px;
    }
  }
}

.asd {
  width: 300px;
  height: 33px;
  border-radius: 5px;
  border: 1px dotted #ccc;
  margin-left: 20px;
  display: flex;
  align-items: center;

  p {
    color: #606266;
    margin-left: 5px;
  }

  :deep(.el-input__wrapper) {
    border: none;
    box-shadow: none !important;
  }

  :deep(.el-date-editor.el-input) {
    width: 200px !important;
  }

  :deep(.el-select__wrapper) {
    border: none;
    box-shadow: none !important;
  }
}

:deep(.gantt_layout_cell) {
  border-radius: 7px;
}

:deep(.gantt_tree_indent) {
  opacity: 0;
}

:deep(.gantt_grid_scale .gantt_grid_head_cell) {
  color: #606266;
  font-size: 15px;
  font-weight: 700;
  border-right: 1px solid #ccc !important;
}

:deep(.gantt_scale_cell) {
  color: #454545 !important;
}

:deep(.gantt_grid_data .gantt_cell) {
  border-right: 1px solid #ccc !important;
  padding: 0;
}

:deep(.gantt_task_progress_wrapper) {
  border-radius: 5px;
}

:deep(.gantt_task_line.gantt_project) {
  border-radius: 5px;
  border: none;
}

:deep(.gantt_data_area div) {
  border-radius: 5px;
  // border:none;
}

:deep(.gantt_tree_content) {
  display: flex;
  align-items: center;

  .jindu {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #4482e3;
    border-radius: 10px;
  }

  .tasktype {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

:deep(.gantt_task_line) {
  border: none;
}

:deep(.gantt_link_point) {
  display: none !important;
}

:deep(.gantt_task_progress) {
  height: 100%;
}

.toppingTask {
  width: 200px;
  height: 200px;
  background-color: #1890ff;
}
</style>
